<template>
    <view class="purchaseDetailContainer">

        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'评价列表'">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <view class="review" v-for="(item,index) in review">
                <view class="head">
                    <view>{{item.score=='good'?'良好':item.score=='average'?'一般':'差'}}</view>
                    <image v-if="item.score=='good'"
                        src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/good.png"></image>
                    <image v-if="item.score=='average'"
                        src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/average.png"></image>
                    <image v-if="item.score=='poor'"
                        src="https://visionmpapi.jiuerjindi.com/upload/mp/cookSide/poor.png"></image>
                </view>
                <view class="details">
                    <view class="detail">
                        <span>味道</span>
                        <view>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star.png"
                                v-for="(item,index) in item.taste"></image>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star_nor.png"
                                v-for="(item,index) in (5-item.taste)"></image>
                        </view>
                    </view>
                    <view class="detail">
                        <span>品相</span>
                        <view>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star.png"
                                v-for="(item,index) in item.appearance"></image>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star_nor.png"
                                v-for="(item,index) in (5-item.appearance)"></image>
                        </view>
                    </view>
                    <view class="detail">
                        <span>服务态度</span>
                        <view>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star.png"
                                v-for="(item,index) in item.service"></image>
                            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/evaluate/star_nor.png"
                                v-for="(item,index) in (5-item.service)"></image>
                        </view>
                    </view>
                </view>
                <view class="pics">
                    <image class="productImg" :src="itemP" v-for="(itemP,indexP) in item.pic"></image>
                </view>
                <view class="remarks">
                    <view class="title">备注</view>
                    <view class="remark">{{item.remark}}</view>
                </view>
            </view>

        </view>

    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");

    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {

                uploadImgs: [],
                imgDomain: "",
                evaluateText: '',
                review: [
                    {
                        score: 'good',
                        taste: 4,
                        appearance: 4,
                        service: 4,
                        pic: [
                            'https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png',
                            'https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png'
                        ],
                        remark: '厨师手艺真不错，做了满满的一桌菜，吃的很舒服，下次还得下单'
                    },
                    {
                        score: 'average',
                        taste: 4,
                        appearance: 4,
                        service: 4,
                        pic: ['https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png', 'https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png'],
                        remark: '厨师手艺真不错，做了满满的一桌菜，吃的很舒服，下次还得下单'
                    },
                    {
                        score: 'poor',
                        taste: 4,
                        appearance: 4,
                        service: 4,
                        pic: ['https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png', 'https://visionmpapi.jiuerjindi.com/upload/mp/index/shucai.png'],
                        remark: '厨师手艺真不错，做了满满的一桌菜，吃的很舒服，下次还得下单'
                    },




                ],
                propStyles: {

                    iconSrc: "black",
                    // bgColor: '#FECF01',

                }

            };
        },
        computed: {

        },
        methods: {


            goBack() {

                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }

            },








            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {



            this.imgDomain = process.env.VUE_APP_BASE_URL;




        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;


    }

    .contentBox {
        .review {
            margin-top: 20rpx;
            width: 750rpx;
            min-height: 858rpx;
            padding: 0rpx 32rpx;
            background: #FFFFFF;

            
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .head {
                display: flex;
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                font-size: 48rpx;
                color: #333333;
                height: 114rpx;
                align-items: center;
                border-bottom: 2rpx solid #D8D8D8;
                justify-content: center;

                image {
                    width: 72rpx;
                    height: 72rpx;
                    margin-left: 36rpx;
                }
            }

            .details {
                height: 286rpx;
                border-bottom: 2rpx solid #D8D8D8;
                padding-top: 60rpx;
                padding-bottom: 40rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .detail {
                    display: flex;
                    align-items: center;

                    span {
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 400;
                        font-size: 32rpx;
                        color: #333333;
                        width: 130rpx;
                        margin-right: 208rpx;
                    }

                    image {
                        width: 38rpx;
                        height: 40rpx;
                    }

                }
            }

            .pics {
                margin-bottom: 24rpx;
                display: flex;
                padding-top: 34rpx;

                image {
                    width: 194rpx;
                    height: 194rpx;
                    margin-right: 38rpx;
                }
            }

            .remarks {
                .title {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 18rpx;
                }

                .remark {
                    width: 690rpx;
                    height: 120rpx;
                    background: rgba(51, 51, 51, 0.05);
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    padding: 16rpx 24rpx;
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }
            }
        }


    }
</style>